<template>
  <el-dialog
    :title="name"
    width="70%"
    top="2vh"
    v-el-drag-dialog
    :close-on-press-escape = false
    :close-on-click-modal	= false
    :visible.sync="dialogVisible"
    :before-close="close"
  >
    <div class="relatedConditions">
      <div class="conditionname">相关条件</div>
      <div>
        <el-checkbox-group v-model="condition">
          <el-checkbox class="rounded-checkbox" label="关键词" size="large"/>
          <el-checkbox class="rounded-checkbox" label="公司描述" size="large"/>
          <el-checkbox class="rounded-checkbox" label="产品描述" size="large"/>
          <el-checkbox class="rounded-checkbox" label="产品特色" size="large"/>
          <el-checkbox class="rounded-checkbox" label="写作段落" size="large"/>
          <el-checkbox class="rounded-checkbox" label="写作要求" size="large"/>
          <el-checkbox class="rounded-checkbox" label="写作语气" size="large"/>
        </el-checkbox-group>
      </div>
    </div>
    <el-form label-width="120px" :model="recordForm" :rules="rules" ref="recordForm">
        <el-form-item label='产品描述:' v-if="condition.includes('产品描述')">
          <el-input type="textarea" :rows="3" v-model="recordForm.product" placeholder="请输入产品描述">
          </el-input>
          <!-- <TranslationSelect :text="recordForm.product" :binding="'product'" @translation="translation"></TranslationSelect> -->
        </el-form-item>
        <el-form-item label='关键词:' v-if="condition.includes('关键词')">
          <el-input type="textarea" :rows="2" v-model="recordForm.keyword" placeholder="请输入关键词，多个关键词请用逗号分割"></el-input>
          <!-- <TranslationSelect :text="recordForm.keyword" :binding="'keyword'" @translation="translation"></TranslationSelect> -->
        </el-form-item>
        <el-form-item label='公司描述:' v-if="condition.includes('公司描述')">
          <el-input type="textarea" :rows="3" v-model="recordForm.company" placeholder="请输入公司描述"></el-input>
          <!-- <TranslationSelect :text="recordForm.company" :binding="'company'" @translation="translation"></TranslationSelect> -->
        </el-form-item>
        <el-form-item label='产品特色:' v-if="condition.includes('产品特色')">
          <el-input type="textarea" :rows="3" v-model="recordForm.feature" placeholder="请输入产品特色"></el-input>
          <!-- <TranslationSelect :text="recordForm.feature" :binding="'feature'" @translation="translation"></TranslationSelect> -->
        </el-form-item>
        <el-form-item label='写作段落:' v-if="condition.includes('写作段落')">
          <el-radio-group v-model="recordForm.paragraphs" class="ml-4">
            <el-radio label="3" size="large">3</el-radio>
            <el-radio label="4" size="large">4</el-radio>
            <el-radio label="5" size="large">5</el-radio>
            <el-radio label="6" size="large">6</el-radio>
            <el-radio label="7" size="large">7</el-radio>
            <el-radio label="8" size="large">8</el-radio>
            <el-radio label="9" size="large">9</el-radio>
            <el-radio label="10" size="large">10</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label='写作要求:' v-if="condition.includes('写作要求')">
          <el-input type="textarea" :rows="2" v-model="recordForm.demand" placeholder="请输入你需要的写作要求"></el-input>
          <!-- <TranslationSelect :text="recordForm.demand" :binding="'demand'" @translation="translation"></TranslationSelect> -->
        </el-form-item>
        <el-form-item label='写作语气:' v-if="condition.includes('写作语气')">
          <el-input type="textarea" :rows="2" v-model="recordForm.modal" placeholder="例如：正式的，幽默的，地道美式英语，带有营销性的"></el-input>
          <!-- <TranslationSelect :text="recordForm.modal" :binding="'modal'" @translation="translation"></TranslationSelect> -->
        </el-form-item>
        <el-form-item label='目标语言:'>
          <el-select style="width:150px;margin-right: 20px;" v-model="recordForm.language" class="m-2" placeholder="Select">
            <el-option label="英语" value="English"/>
            <el-option label="中文" value="Chinese"/>
            <el-option label="日语" value="Japanese"/>
          </el-select>
          <el-select style="width:150px;margin-right: 20px;" v-model="recordForm.wordCount" class="m-2" placeholder="Select">
            <el-option label="300字数" value="300"/>
            <el-option label="500字数" value="500"/>
            <el-option label="800字数" value="800"/>
            <el-option label="1200字数" value="1200"/>
          </el-select>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit()">确 定</el-button>
      <el-button type="info" @click="close">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
// import TranslationSelect from './TranslationSelect.vue';
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  directives: { elDragDialog },
  components: {
    // TranslationSelect,
  },
  props: {
    dialogVisible:{
      type: Boolean,
      default: () => false
    },
    loading:{
      type: Boolean,
      default: () => false
    },
    name:{
      type: String,
      default: () => ''
    },
  },
  watch:{
  },
  data(){
    return{
      options: [
        { label: "Option 1", value: "option1" },
        { label: "Option 2", value: "option2" },
        { label: "Option 3", value: "option3" },
      ],
      condition: ['产品描述'],
      recordForm: {
        language: 'English',
        wordCount: '500',
      },
      rules: {},
      show: false
    }
  },
  methods:{
    translation(result){
      if(result){
        this.recordForm[result.binding] = result.translation
      }
    },
    submit(){
      this.$emit('submit', this.recordForm)
    },
    close(){
      this.$emit('closeDialog')
    },
  }
}
</script>

<style lang="scss" scoped>
  .relatedConditions{
    display: flex;
    align-items: center;
    height: 95px;
    .conditionname{
      width: 120px;
      height: 30px;
      line-height: 30px;
      color: #409EFF;
      border: 2px solid #409EFF;
      text-align: center;
      border-radius: 20px;
      margin-right: 20px;
    }
  }
</style>
